<template>
  <div style="margin: 5vh auto; text-align:center;">
    <a-row>
      <a-col :xs="{ span: 16, offset: 4 }" :lg="{ span: 8, offset: 7 }">
        <h1><a-icon type="account-book" theme="filled" style="color: #178cf4"/> &nbsp;&nbsp;&nbsp;积分系统-web</h1>
      </a-col>
    </a-row>
    <a-row>

      <a-col :xs="{ span: 16, offset: 4 }" :lg="{ span: 6, offset: 8 }">
        <a-form
            id="components-form-demo-normal-login"
            :form="form"
            class="login-form"
            @submit="handleSubmit"
        >
          <a-form-item label="用户名" :labelCol="{ span: 4 }":wrapperCol="{ span: 18 }">
            <a-input
                v-decorator="[
          'userName',
          { rules: [{ required: true, message: '请输入用户名!' }] },
        ]"
                placeholder="Username"
            >
              <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="密码" :labelCol="{ span: 4 }":wrapperCol="{ span: 18 }">
            <a-input
                v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入密码!' }] },
        ]"
                type="password"
                placeholder="Password"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item  >
          <a-form-item label="登录方式" :labelCol="{ span: 4 }":wrapperCol="{ span: 18 }" v-if="false">
            <a-select :default-value="defaultLogin" @change="handleChange">
              <a-icon slot="suffixIcon" type="contacts" theme="filled" style="color: rgba(0,0,0,.25)" />
              <a-select-option v-for="type in dataSource" :key="type.value" :value="type.value">{{type.lable}}
              </a-select-option>
            </a-select>

          </a-form-item  >
          <a-form-item>
            <!--            <a-checkbox
                          v-decorator="[
                                  'remember',
                                  {
                                    valuePropName: 'checked',
                                    initialValue: true,
                                  },
                                ]"
                      >
                        记住密码
                      </a-checkbox>-->
            <!--            <a class="login-form-forgot" href="">
                          Forgot password
                        </a>&ndash;&gt;-->
            <a-button type="primary" html-type="submit" class="login-form-button">
              登录
            </a-button>
            <!--            &lt;!&ndash;            Or
                        <a href="">
                          register now!
                        </a>&ndash;&gt;-->
          </a-form-item>
        </a-form>
      </a-col>

    </a-row>
  </div>

</template>

<script>

import API from './api/api_login';
import {setUserInfo,setMenus} from "@/utils/storageUtil";

export default {
  name: "login",
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  data(){
    return{
      defaultLogin: 'personal',
      dataSource:[{
        lable:'个人',
        value:'personal'
      },{
        lable:'福利群',
        value:'group'
      },{
        lable:'团队',
        value:'team'
      },{
        lable:'管理员',
        value:'manage'
      }]
    }
},
  methods: {
    handleChange(value){
      console.log('登录方式:',value);
    },
    handleSubmit(e) {
      let that = this;
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {

          API.login(values).then(res =>{
            if (res.code == 200){
              that.$message.success('登录成功');
              if (res.userInfo){
                  setUserInfo(JSON.stringify(res.userInfo));
                  setMenus(res.userInfo.menus)
              }
                setTimeout(()=>{
                    that.$router.push('/');
                },500)
            }else {
              if (res.msg){
                that.$message.error(res.msg);
              }else {
                that.$message.error('登录失败,请联系管理员');
              }
            }
          })
        }
      });
    },
  },
}
</script>

<style>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: left;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
